<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>采购订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-input.is-disabled .el-input__inner {
            color: #000;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-form :inline="true" :form="form">
            <!-- <el-form-item>
                <el-button type="primary" @click="Add">对账</el-button>
            </el-form-item> -->
            <el-form-item>
                <el-input v-model.trim="form.Purchase_Order_SerialNumber" clearable placeholder="订单编号" />
            </el-form-item>
            <el-form-item>
                <el-date-picker prefix-icon="el-icon-date" v-model="form.Purchase_Date" clearable type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSerach">查询</el-button>
            </el-form-item>
            <el-form-item>
                <yl-button type="success" :data="ExportData" :loading="loading" @click="Export(form)">导出</yl-button>
            </el-form-item>
        </el-form>
        <yl-invoice :data="invoiceData"></yl-invoice>
        <el-table :data="tableData" stripe border height="calc(100vh - 140px)" style="width: 100%">
            <el-table-column align="center" type="index" fixed="left" label="序号" width="50"></el-table-column>
            <el-table-column align="center" prop="Row_Status" width="180" fixed="left" label="操作">
                <template v-slot="{row}">
                    <el-dropdown size="small" trigger="click">
                        <el-button size="small" type="primary">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item style="margin-bottom: 5px;">
                                <el-button type="primary" @click="Show(row)" size="small">详情查看</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item style="margin-bottom: 5px;">
                                <el-button :disabled="row.Row_Status.charAt(0)!='2'" :type="row.Row_Status.charAt(0)=='2'?'success':'info'" @click="Invoice(row)" size="small">开票</el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Purchase_Order_SerialNumber" min-width="300" show-overflow-tooltip label="采购订单编号"></el-table-column>
            <el-table-column align="center" prop="Purchase_Date" min-width="300" show-overflow-tooltip label="提交时间"></el-table-column>
            <el-table-column align="center" prop="Amount" min-width="120" show-overflow-tooltip  label="销售金额">
                <template v-slot="{row}">
                    {{thousands(row.Amount)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Purchase_Amount" min-width="120" show-overflow-tooltip  label="采购总价">
                <template v-slot="{row}">
                    {{thousands(row.Purchase_Amount)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Paid_Amount" min-width="120" show-overflow-tooltip label="已付金额">
                <template v-slot="{row}">
                    {{thousands(row.Paid_Amount)}}
                </template>
            </el-table-column>
            <el-table-column align="center" min-width="120" show-overflow-tooltip label="未付金额">
                <template v-slot="{row}">
                    <span :style="{color:accSub(row.Purchase_Amount,row.Paid_Amount)==0?'':'#F56C6C'}">{{thousands(accSub(row.Purchase_Amount,row.Paid_Amount))}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column align="center" fixed="right" width="120" label="开票状态">
                <template v-slot="{row}">
                    <el-tag :type="row.Row_Status.charAt(1)=='0'?'':'success'">{{row.Row_Status.charAt(1)=='0'?'未上传发票':'已上传发票'}}</el-tag>
                </template>
            </el-table-column>  -->
            <el-table-column align="center"  fixed="right"  width="150" label="付款状态">
                <template v-slot="{row}">
                    <el-tag :type="row.Row_Status.charAt(0)=='0'?'':row.Row_Status.charAt(0)=='1'?'warning':'success'">{{Type(row.Row_Status)}}</el-tag>
                </template>
            </el-table-column> 
        </el-table>
        <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10 ,20, 30, 50, 100]"
            :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <show-detail :visible.sync="dialogVisible" :data="Purchase_Order"></show-detail>
        <edit :visible.sync="dialogEditVisible" :data="Purchase_Order" @success="getList(form)"></edit>
        <invoice :visible.sync="dialogInvoiceVisible" :data="Purchase_Order" @success="getList(form)"></invoice>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.min.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>